
import React, { Component } from 'react';
import {Route} from 'react-router-dom';

import "./index.css";
import { NavBar, TabBar } from "antd-mobile";

import Boss from "../boss/Boss";
import Jobhunter from "../jobhunter/Jobhunter";
import My from "../my/My";
import Message from "../message/Message";

import { connect } from "react-redux";
import { loadUseinfoData } from '../../redux/reducers/user.reducer.js';
import { getChats } from '../../redux/reducers/chat.reducer.js';

import io from "socket.io-client";

const socket = io('ws://localhost:3001');
class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
          selectedTab: 'blueTab',
          hidden: false,
          fullScreen: false,
          currentId:''
        };
      }
    
      render() {
        const current_pathname = this.props.location.pathname;
        const navBarList = [
            {   
                path:'/boss',
                title:"列表",
                key:'list',
                icon:require('../../assets/img/yingpin.png'),
                selecticon:require('../../assets/img/yingpin-active.png'),
                headbartext:'求职者列表',
                component:Boss,
                selecttab:'blueTab',
                hide:this.props.user.type==='jobhunter'
            },
            {   
                path:'/jobhunter',
                title:"列表",
                key:'list',
                icon:require('../../assets/img/zhaopin.png'),
                selecticon:require('../../assets/img/zhaopin-active.png'),
                headbartext:'招聘者列表',
                component:Jobhunter,
                selecttab:'blueTab',
                hide:this.props.user.type==='boss'
            },
            {   
                path:'/message',
                title:"消息",
                key:'message',
                icon:require('../../assets/img/message.png'),
                selecticon:require('../../assets/img/message-active.png'),
                headbartext:'消息',
                component:Message,
                selecttab:'redTab'
            },
            {   
                path:'/my',
                title:"个人中心",
                key:'my',
                icon:require('../../assets/img/my.png'),
                selecticon:require('../../assets/img/my-active.png'),
                headbartext:'个人中心',
                component:My,
                selecttab:'yellowTab'
            }
        ]
        // 此处过滤
        const relNavBarList = navBarList.filter(item => !item.hide);
        return (
            <div className="main_box">
                <div className="head_box">
                    <NavBar mode="dark">
                        {navBarList.find(item => item.path===current_pathname).headbartext}
                    </NavBar>
                </div>

                {/* 中间界面 */}
                {
                    this.props.user.name?
                    <div>
                        <Route path='/boss' component={Boss}></Route>
                        <Route path='/jobhunter' component={Jobhunter}></Route>
                        <Route path='/my' component={My}></Route>
                        <Route path='/message' component={Message}></Route>
                    </div>:''
                }
                
                 {/* 中间界面 */}

                {/* 底部 */}
                <div style={{width:'100%',position:"fixed",bottom:0}}>
                    <TabBar
                        unselectedTintColor="#949494"
                        tintColor="#33A3F4"
                        barTintColor="white"
                        hidden={this.state.hidden}>
                        {/* 一 icon */}
                        {relNavBarList.map(item => {
                            return (
                                <TabBar.Item
                                    title={item.title}
                                    key={item.key}
                                    icon={<div style={{
                                        width: '22px',
                                        height: '22px',
                                        background: 'url('+ item.icon +') center center /  21px 21px no-repeat' 
                                        }}/>
                                    }
                                    selectedIcon={<div style={{
                                        width: '22px',
                                        height: '22px',
                                        background: 'url('+ item.selecticon +') center center /  21px 21px no-repeat' }}/>
                                    }
                                    selected={this.state.selectedTab === item.selecttab}
                                    badge={item.selecttab==='redTab'?this.props.chats.unread:''}
                                    onPress={()=>this.onPress(item.key)}
                                ></TabBar.Item>
                            )
                        })}
                    </TabBar>
                </div>
            </div>
        );
      }

    componentDidMount(){
        this.props.loadUseinfoData();
        this.setState({
            currentId:this.props.user._id
        })
        // if(!this.props.chats.chats.length){
            this.props.getChats(this.props.user._id);
            socket.on('res_msg',(data)=>{
                this.props.getChats(this.props.user._id);
            })
        // }

    }

    onPress(icon){
          switch(icon){
              case 'list':
                   window.console.log(this.props.user.type)
                    this.setState({
                        selectedTab: 'blueTab',
                    });
                    if(this.props.user.type==='boss'){
                        // this.props.history.push({path:'/boss',query:{name:name}});
                        this.props.history.push('/boss');
                    }else if(this.props.user.type==='jobhunter'){
                        // this.props.history.push({path:'/jobhunter',query:{name:name}});
                        this.props.history.push('/jobhunter');
                    }
              break;
              case 'message':
                    this.setState({
                        selectedTab: 'redTab',
                    });
                    // this.props.history.push({path:'/message',query:{name:name}});
                    this.props.history.push('/message');
              break;
              case 'my':
                    this.setState({
                        selectedTab: 'yellowTab',
                    });
                    // this.props.history.push({path:'/my',query:{name:name}});
                    this.props.history.push('/my');
              break;
                  
              default:
                  break;
          }
    }
}

const mapStateToProps = (state,props)=>{
    return {
        user:state.userReducer,
        chats:state.chatReducer,
    }
}

export default connect(
    mapStateToProps,
    { getChats,loadUseinfoData }
)(Main)

